<template>
	<view class="edit-info">
		<view class="info-box">
			<view class="avatar">
				<uv-upload @afterRead="afterRead" :maxCount="1">
					<uv-avatar :src="api.FileById+data.avatar" size="164rpx"></uv-avatar>
				</uv-upload>
				<!-- <uv-avatar :src="data.avatar" size="164rpx"></uv-avatar> -->
			</view>
			<uv-form :model="data">
				<uv-form-item label="昵称" prop="data.nickName" borderBottom>
					<uv-input v-model="data.nickName" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="性别" prop="data.sexName" borderBottom>
					<view style="width: 100%;" @click="pickerShow">{{data.sexName}}</view>
				</uv-form-item>
				<uv-form-item label="生日" prop="data.birthday" borderBottom>
					<view style="width: 100%;" @click="dateShow">{{data.birthday?data.birthday:'1111-11-11'}}</view>
				</uv-form-item>
				<uv-form-item label="简介" prop="data.description">
					<uv-textarea v-model="data.description" count></uv-textarea>
				</uv-form-item>
				<uv-button type="primary" text="保存" customStyle="margin-top: 80rpx" @click="submit"></uv-button>
			</uv-form>
		</view>
		<!-- 上传头像的选择器 -->
		<upload v-model="fileList" :maxCount="1" :uploadUrl="uploadUrl" @after-upload="onUploadSuccess"
			:before-upload="beforeUpload" ></upload>
		<uv-picker ref="picker" :columns="sex" @confirm="confirm"></uv-picker>
		<uv-datetime-picker ref="datetimePicker" v-model="dateTime" :minDate="315504000000" :maxDate="Date.now()"    mode="date" @confirm="dateConfirm">
		</uv-datetime-picker>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import api from './api';
	const data = ref({})
	import { useUserStore } from '@/stores/user';
	const userStore = useUserStore()

	const getUserByMyself = () => {
		api.getByMyself().then(res => {
			data.value = res.data
			data.value.birthday = data.value.birthday.slice(0,10)
			console.log(data.value);
		})
	}
	getUserByMyself()

	// 上传头像的文件列表
	const fileList = ref();

	const afterRead = async (e) => {
		console.log(e.file);
		const result = await api.upload(e.file.url)
		data.value.avatar = result.data.id
		api.updateAvatar(data.value).then(res => {
			let type = 'success'
			if(!res.successed){
				type = 'error'
			}
			toast.value.show({
				type:type,
				message:res.message
			})
		})
	}

	//选择性别
	const sex = [
		['男', '女', '未知']
	]
	const picker = ref()
	const pickerShow = () => {
		picker.value.open()
	}

	const confirm = (e, a) => {
		data.value.sexName = e.value[0]
	}
	
	//生日
	const dateTime = ref(Date.now())
	const datetimePicker = ref()
	const dateNow = Date.now()
	const dateShow = ()=>{
		datetimePicker.value.open()
	}
	const dateConfirm = (e)=>{
		let date = new Date(e.value)
		let Y = date.getFullYear() + '-';
		let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		let D = date.getDate() ;
		if(D/10 <1){
			D = '0'+D
		}
		data.value.birthday = Y+M+D
	}
	
	//提交
	const submit = ()=>{
		console.log(data.value);
		api.updateUser(data.value).then(res=>{
			let type = 'success'
			if(!res.successed){
				type = 'error'
			}else{
				userStore.nickName = data.value.nickName
				userStore.avatar = data.value.avatar
			}
			toast.value.show({
				type:type,
				message:res.message
			})
		})
	}
	
	//提示
	const toast = ref()
</script>

<style lang="scss">
	.edit-info {
		.info-box {
			width: 80%;
			margin: 120rpx auto;

			.avatar {
				margin: auto;
				width: 164rpx;
			}
		}
	}
</style>